import React from 'react';
import QueueAnim from 'rc-queue-anim';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import PropTypes from 'prop-types';
import TweenOne, { TweenOneGroup } from 'rc-tween-one';
import {Icon} from 'antd';



//模拟数据
const textData = {
  content: '你见，或者不见我，我就在那里，不悲不喜。 你念，或者不念我，情就在那里，不来不去。 你爱，或者不爱我，爱就在那里，不增不减',
  title: '老师的信息或者课程的详情介绍',
};
let dataArray = [
  { image: 'https://zos.alipayobjects.com/rmsportal/DGOtoWASeguMJgV.png' },
  { image: 'https://zos.alipayobjects.com/rmsportal/BXJNKCeUSkhQoSS.png' },
  { image: 'https://zos.alipayobjects.com/rmsportal/TDIbcrKdLWVeWJM.png' },
  { image: 'https://zos.alipayobjects.com/rmsportal/SDLiKqyfBvnKMrA.png' },
];

dataArray = dataArray.map(item => ({ ...item, ...textData }));

class Content extends React.Component {
  static defaultProps = {
    className: 'content0',
  };
  static propTypes = {
    className: PropTypes.string,
  };


  constructor(props) {
    super(props);
    this.state = {
      picOpen: {},
    };
  }


  onImgClick = (e, i) => {
    const picOpen = this.state.picOpen;
    Object.keys(picOpen).forEach((key) => {
      if (key !== i && picOpen[key]) {
        picOpen[key] = false;
      }
    });
    picOpen[i] = true;
    this.setState({
      picOpen,
    });
  };

  onClose = (e, i) => {
    const picOpen = this.state.picOpen;
    picOpen[i] = false;
    this.setState({
      picOpen,
    });
  };

  onTweenEnd = (i) => {
    const picOpen = this.state.picOpen;
    delete picOpen[i];
    this.setState({
      picOpen,
    });
  };

  getDelay = (e) => {
    const i = e.index + dataArray.length % 4;
    return (i % 4) * 100 + Math.floor(i / 4) * 100 + 200;
  };

  getLiChildren = () => {
    const imgWidth = 220;
    const imgHeight = 152;
    const imgBoxWidth = 260;
    const imgBoxHeight = 192;
    return dataArray.map((item, i) => {
      const { image, title, content } = item;
      const isEnter = typeof this.state.picOpen[i] === 'boolean';
      const isOpen = this.state.picOpen[i];

      const left = isEnter ? 0 : imgBoxWidth * (i % 4);
      const imgLeft = isEnter ? imgBoxWidth * (i % 4) : 0;
      const isRight = Math.floor((i % 4) / 2);
      const isTop = Math.floor(i / 4);
      let top = isTop ? (isTop - 1) * imgBoxHeight : 0;
      top = isEnter ? top : imgBoxHeight * isTop;
      let imgTop = isTop ? imgBoxHeight : 0;
      imgTop = isEnter ? imgTop : 0;

      const liStyle = isEnter ? { width: '100%', height: 350, zIndex: 1 } : null;
      const liAnimation = isOpen ?
        { boxShadow: '0 2px 8px rgba(140, 140, 140, .35)' } :
          { boxShadow: '0 0px 0px rgba(140, 140, 140, 0)' };
      let aAnimation = isEnter ?
        ({
          delay: 400,
          ease: 'easeInOutCubic',
          width: imgWidth,
          height: imgHeight,
          onComplete: this.onTweenEnd.bind(this, i),
          left: imgBoxWidth * (i % 4),
          top: isTop ? imgBoxHeight : 0,
        }) : null;
      aAnimation = isOpen ?
        ({
          ease: 'easeInOutCubic',
          left: isRight ? (imgBoxWidth * 2) - 10 : 0,
          width: '50%',
          height: 350,
          top: 0,
        }) : aAnimation;

      // 位置 js 控制；
      return (<TweenOne
        key={i}
        style={{
          left,
          top,
          ...liStyle,
        }}
        component="li"
        className={isOpen ? 'open' : ''}
        animation={liAnimation}
      >
        <TweenOne
          component="a"
          onClick={e => this.onImgClick(e, i)}
          style={{
            left: imgLeft,
            top: imgTop,
          }}
          animation={aAnimation}
        >
          <img src={image} width="100%" height="100%" />
        </TweenOne>
        <TweenOneGroup
          enter={[
            { opacity: 0, duration: 0, type: 'from', delay: 400 },
            { ease: 'easeOutCubic', type: 'from', left: isRight ? '50%' : '0%' },
          ]}
          leave={{ ease: 'easeInOutCubic', left: isRight ? '50%' : '0%' }}
          component=""
        >
          {isOpen && <div
            className={`${this.props.className}-text-wrapper`}
            key="text"
            style={{
              left: isRight ? '0%' : '50%',
            }}
          >
            <h1>{title}</h1>
            <Icon type="cross" onClick={e => this.onClose(e, i)} />
            <em />
            <p>{content}</p>
          </div>}
        </TweenOneGroup>
      </TweenOne>);
    });
  };




  render() {
    const props = { ...this.props };
    console.log(props);
    const isMode = props.isMode;
    delete props.isMode;
    return (
      <div
        {...props}
        className={`content-template-wrapper content-half-wrapper ${props.className}-wrapper`}
      >
        <div className={`${props.className}-text`}>
          <h1 key="h1" id={`${props.id}-title`}>
            热门推荐
          </h1>
          <p>
            -----------------
          </p>
        </div>
        <div className={`${props.className}-grid`}>
          <QueueAnim
            delay={this.getDelay}
            component="ul"
            className={`${this.props.className}-image-wrapper`}
            interval={0}
            type="bottom"
          >
            {this.getLiChildren()}
          </QueueAnim>
        </div>
      </div>
    );
  }
}


export default Content;
